<!-- /*
 * @Author: 谢力 843926058@qq.com
 * @Date:   2019-11-06
 * @Last Modified by:   谢力
 * @Last Modified time: 2019-11-07
 */ -->
<template>
    <div class="mt-list-container mini">
        <div class="ui-mode-box body" id="container" ref="scroll">
            <div class="relative" v-if="list && list.length">
                <div class="mt-list-item" :key="`food-${item.id_public_goods_info}-${i}`" v-for="(item, i) in list"
                    @click="goDetail(item)">
                    <div class="box">
                        <img class="app-image auto" @mousedown.prevent
                            v-lazy.container="formatImgUrl(item.goods_main_image)">
                        <span class="promotion" v-if="dictionary.promotion_type[item.type_promotion]">
                            <img class="app-image" @mousedown.prevent
                                v-lazy.container="formatImgUrl(dictionary.promotion_url[item.type_promotion])">
                        </span>
                    </div>
                    <div class="flex-col main">
                        <div class="flex1">
                            <h3>{{ item.goods_name | formatText }}</h3>
                            <p class="m1">{{ item.sales_describe | formatText }}</p>
                        </div>
                        <p class="m2 flex-row align-center-row">
                            <span class="red"><i class="m">&yen;</i>{{ item.price_4_shop_retail | formatText }}<i
                                    class="unit">{{ getUnit }}</i></span>
                            <span class="old"><i class="m">&yen;</i>{{ item.other_market_price | formatText }}<i
                                    class="unit">{{ getUnit }}</i></span>
                        </p>
                        <p class="discount-info flex-row" v-if="getSpecialFlag(item)">
                            <span class="red flex1">限时特价<i
                                    class="m">&yen;</i>{{ item.tejia_retail_price | formatText }}{{ getUnit }}
                                限{{ item.tejia_max_count | formatText }}份</span>
                        </p>
                        <a href="javascript:;" class="button" @click.stop="handleAddCart($event, item)">＋</a>
                    </div>
                </div>
                <div v-if="isScrolling" class="flex1 flex-row align-center scrolling-content relative">
                    <span class="icon">
                        <bsx-loading master-background="rgba(0,0,0,0)" box-background="rgba(0,0,0,0)" :size="35"
                            :show-text="false"></bsx-loading>
                    </span>
                    <span class="text">努力加载中...</span>
                </div>
                <div v-else-if="isLoadEnded" class="flex1 flex-row align-center scrolling-content relative">已经到底啦~~
                </div>
            </div>
        </div>
        <shopping-cart ref="cart" :cart-num="getShoppingCartNum" @click.native="goShoppingCart"></shopping-cart>
        <transition name="m_cart">
            <div class="m_add_item flex-row align-center" ref="addCart" :style="getShoppingStyle" v-show="isShopping">
                <img v-if="currentGoodImage" :src="currentGoodImage">
            </div>
        </transition>
    </div>
</template>
<script>
import mixinCommon from '../../mixins/common';
import mixinRequest from '../../mixins/request';
import mixinCart from '../../mixins/cart';
import mixinList from '../../mixins/list';
import shoppingCart from '../../public/shopping-cart';
export default {
    data () {
        return {
            public_goods_order_detail_list: [],
            currentGoodImage: null,
            current_id: '',
            current_child_id: '',
            isLoaded: false
        };
    },
    props: {
        id_public_goods_type: '',
        type_child: ''
    },
    mixins: [
        mixinCommon,
        mixinRequest,
        mixinCart,
        mixinList
    ],
    components: {
        shoppingCart
    },
    computed: {
        getShoppingCartNum () {
            let n = 0;
            this.public_goods_order_detail_list.forEach(item => {
                n += item.order_number;
            });
            return n;
        },
        getUnit () {
            return this.$parent.public_agent_info.open_score_pay == '2' ? '积分' : '元';
        }
    },
    watch: {
        id_public_goods_type: {
            handler (val) {
                if (val && val != this.current_id) {
                    this.current_id = val;
                    this.$nextTick(this.init);
                };
            },
            immediate: true
        },
        type_child: {
            handler (val) {
                if (val && val != this.current_child_id) {
                    this.current_child_id = val;
                    this.$nextTick(this.init);
                } else {
                    this.current_child_id = '';
                    this.$nextTick(this.refresh);
                }
            },
            immediate: true
        }
    },
    created () {
    },
    mounted () {
    },
    methods: {
        init() {
            let public_agent_info=this.$store.state.global.public_agent_info,
                public_user_info=this.$store.state.global.public_user_info;
            if(public_agent_info&&public_user_info){
                this.public_agent_info=public_agent_info;
                this.public_user_info=public_user_info;
                document.title=this.public_agent_info.application_name;
                this.getShoppingInfo().then(() => {
                    this.currentPage = 0;
                    this.isScrolling = false;
                    this.isLoadEnded = false;
                    this.list = [];
                    this.resetScroll();
                    this.getListInfo({
                        flag: true,
                        page: 0
                    });
                }).catch(({ msg }) => {
                    this.showResult(msg, true);
                });
            }else{
                this.getPageInfo({
                    name:'my',
                    param:{
                        invoke_method:'user_and_shop_info'
                    }
                }).then(({result,response})=>{ 
                    this.public_agent_info=result.public_agent_info||{};
                    this.public_user_info=result.public_user_info||{};
                    document.title=this.public_agent_info.application_name;
                    this.setState({
                        key:'public_agent_info',
                        value:this.public_agent_info
                    });
                    this.setState({
                        key:'public_user_info',
                        value:this.public_user_info
                    });
                    this.getShoppingInfo().then(() => {
                        this.currentPage = 0;
                        this.isScrolling = false;
                        this.isLoadEnded = false;
                        this.list = [];
                        this.resetScroll();
                        this.getListInfo({
                            flag: true,
                            page: 0
                        });
                    }).catch(({ msg }) => {
                        this.showResult(msg, true);
                    });
                });
            };
        },
        /*
         * 进入购物车
         */
        goShoppingCart () {
            if (!this.getShoppingCartNum) {
                return this.showMessage('您的购物车还没有商品喔！');
            };
            this.$http.post({
                name: 'food.detail.submit',
                data: {
                    invoke_method: 'details_4_order',
                    id_public_goods_order_record: this.$parent.public_goods_order_record.id_public_goods_order_record
                },
                loading: {
                    enabled: true
                }
            }).then(({ result, response }) => {
                let orderDetail = this.$parent.public_goods_order_record.list_order_details,
                    url;
                if (orderDetail) {
                    orderDetail = orderDetail[0] || {};
                };
                this.$router.push({
                    path: '/category/shopping',
                    query: {
                        id: this.$parent.public_goods_order_record.id_public_goods_order_record
                    }
                });
            }).catch(({ msg }) => {
                this.showMessage(msg);
            });
        },
        /*
         * 加入购物车
         */
        handleAddCart (event, item) {
            if (item.goods_selections && item.goods_selections.length) {
                return this.showMessage('请点击商品进入详情页面选择型号！');
            };
            let target = event.target;
            if (!target.__click) {
                target.__click = 1;
                this.$http.post({
                    name: 'common.shopping.modify.step',
                    data: {

                        invoke_method: 'num_change_order_details',
                        pre_cmd_para_close_error: false,
                        id_public_goods_order_record: this.$parent.public_goods_order_record.id_public_goods_order_record,
                        seller_id: item.publicGoodsSupply4Agent.seller_id,
                        pre_cmd_para_order_detail_change_data: item.id_public_goods_info + '-_-1',
                        pre_cmd_para_opt_type: 1
                    },
                    loading: {
                        enabled: false
                    }
                }).then(({ result, response }) => {
                    delete target.__click;
                    this.isShopping = true;
                    this.currentGoodImage = this.formatImgUrl(item.goods_main_image);
                    this.startAnimate(target, 1).then(() => {
                        this.isShopping = false;
                        this.currentGoodImage = '';
                        this.public_goods_order_detail_list = result.public_goods_order_detail_list || this.public_goods_order_detail_list;
                    });
                }).catch(({ msg }) => {
                    delete target.__click;
                    this.showMessage(msg);
                });
            };

        },
        /*
         * 获取是否显示特价
         */
        getSpecialFlag (item) {
            if (item.tejia_retail_price > 0) {
                return item.tejia_time_end && (new Date(item.tejia_time_end).getTime() > new Date().getTime());
            };
            return false;
        },
        /*
         * 刷新
         */
        refresh () {
            this.currentPage = 0;
            this.isScrolling = false;
            this.isLoadEnded = false;
            this.list = [];
            this.resetScroll();
            this.getListInfo({
                flag: true,
                page: 0
            });
        },
        /*
         * 获取列表数据
         */
        getListInfo ({ flag, page, callback }) {
            if (!this.isLoaded) {
                this.showLoading();
            };
            this.getPageInfo({
                flag,
                tip: false,
                loading: {
                    size: 40,
                    showText: false,
                    alone: true
                },
                name: 'category.foodNew',
                param: {
                    invoke_method: 'public_page_4m_shop_goods_list_2_reg',
                    id_public_goods_type: this.current_id,
                    type_child: this.current_child_id,
                    pre_db_spec_buyer_id: this.public_agent_info.id_public_agent_info,
                    pre_db_para_begin_idx: page * this.pageSize,
                    pre_db_para_length_4_list: this.pageSize,
                    'public_goods_supply_4_shop.buyer_id': this.public_agent_info.id_public_agent_info,
                    'public_goods_supply_4_shop.id_public_goods_supply_4_shop_is_not_null': true,
                    'public_goods_supply_4_shop.is_online': 0,
                    pre_db_para_begin_number:1,
                    pre_db_para_number_search_switch:'public_goods_supply_4_shop.shop_left_count'
                }
            }).then(({ result, response }) => {
                if (result.page_content && result.page_content.length) {
                    this.list.push(...result.page_content.slice(0, this.pageSize));
                    this.currentPage = page;
                    if (result.page_content.length < this.pageSize) {
                        this.isLoadEnded = true;
                    } else if ((this.currentPage + 1) * this.pageSize >= parseInt(result.result_num)) {
                        this.isLoadEnded = true;
                    };
                    callback && callback();
                } else {
                    if (flag) {
                        this.showResult('没有查询到相关数据');
                    } else {
                        this.$$toast({
                            target: this.$el,
                            content: '没有查询到相关数据',
                            status: false
                        });
                    };
                    callback && callback();
                };
            }).catch(({ msg }) => {
                if (!flag) {
                    this.showToast(msg, false);
                };
                callback && callback();
            });
        },
        /*
         * 去详情
         */
        goDetail (item) {
            this.$router.push({
                path: '/category/detail',
                query: {
                    id: item.id_public_goods_info
                }
            });
        },
        /*
         * 获取购物车中商品数量
         */
        getShoppingInfo () {
            return new Promise((resolve, reject) => {
                if (!this.isLoaded) {
                    this.$http.post({
                        name: 'common.shopping',
                        data: {
                            invoke_method: 'details_4_order',
                            id_public_goods_order_record: this.$parent.public_goods_order_record.id_public_goods_order_record
                        },
                        loading: {
                            enabled: false
                        }
                    }).then(({ result, response }) => {
                        this.public_goods_order_detail_list = result.public_goods_order_detail_list || [];
                        this.public_agent_info = result.public_agent_info
                        this.isLoaded = true;
                        resolve({ result, response });
                    }).catch(({ msg }) => {
                        reject({ msg });
                    });
                } else {
                    resolve();
                };
            });
        }
    },
    beforeDestroy () {
    }
}
</script>

<style lang="less" scoped>
.mt-list-container {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: #f5f5f5;

    &.mini {
        left: 5rem;
    }

    .body {
        overflow-x: hidden;
        overflow-y: auto;
        padding: 0 0.5rem;
    }

    .mt-list-item {
        position: relative;
        padding: 0.5rem 0;
        border-top: solid 1px #eee;
        height: 5.2rem;

        &:first-child {
            border-top: none;
        }

        .box {
            width: 5.5rem;
            height: 4.2rem;
            background: #eee;
            overflow: hidden;
            position: relative;

            .promotion {
                position: absolute;
                width: 1.5rem;
                height: 1.95rem;
                overflow: hidden;
                right: 0;
                top: -0.2rem;
            }
        }

        .main {
            position: absolute;
            top: 0.5rem;
            bottom: 0.5rem;
            left: 6rem;
            right: 0;

            h3 {
                font-size: 0.8rem;
                font-weight: normal;
                line-height: 1rem;
                margin-bottom: 0.5rem;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
                margin-top: 0.15rem;
            }

            p {
                &.m1 {
                    font-size: 0.6rem;
                    color: #9b9b9b;
                    line-height: 0.8rem;
                    position: relative;
                    bottom: 0.3rem;
                }

                &.m2 {
                    color: #f24b42;
                    font-size: 0.8rem;
                    position: relative;
                    bottom: 0.1rem;
                    line-height: 1rem;
                }

                &.discount-info {
                    color: #f24b42;
                    font-size: 0.6rem;
                    line-height: 1rem;
                    bottom: 0.25rem;
                    position: relative;
                }

                i.m {
                    font-size: 0.6rem;
                    font-family: Verdana;
                }

                i.unit {
                    font-size: 0.6rem;
                }

                span {
                    &.old {
                        color: #9b9b9b;
                        margin-left: 1rem;
                        font-size: 0.6rem;
                        text-decoration: line-through;
                    }
                }
            }

            .button {
                position: absolute;
                bottom: 0.5rem;
                right: 0;
                font-size: 0.7rem;
                border-radius: 0.1rem;
                background: #eee;
                width: 1.2rem;
                line-height: 1.2rem;
                text-align: center;
                color: @base-color;
                height: 1.2rem;
                display: block;

                &:active {
                    background: #ddd;
                }
            }
        }
    }
}
</style>
